<template>
  <div class="PackageOrderDetail">
    <div>
      <div class="div_Time">
        {{message}}
      </div>
      <div class="div_package">
        <h1>{{buyServiceInfo.package_name}}</h1>
      </div>
      <el-table :data="buyServiceList">
        <el-table-column prop="service_type_title" align="center" label="服务项名称">
        </el-table-column>
        <el-table-column prop="original_price" align="center" label="原价">
        </el-table-column>
        <el-table-column prop="current_price" align="center" label="现价">
        </el-table-column>
        <el-table-column prop="frequency" align="center" label="天数/次数">
        </el-table-column>
        <el-table-column prop="memo" align="center" label="简介">
        </el-table-column>
      </el-table>
      <div class="div_bottom">
        <div class="div_information">
          <span>服务项个数：{{buyServiceList.length}}个</span>
          总金额:<span style="color:#f40;font-weight:normal">￥{{buyServiceInfo.money}}元</span>
        </div>
        <div class="div_button">
          <el-button type="primary" @click="Comfirm" style="float:right">确认支付</el-button>
          <span @click="Cancel" class="return">
              <i class="fa fa-reply iconstyle"></i>重新选择套餐
            </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'ConfirmOrderDetail',
    props: ['packageData'],
    data () {

      return {
        buyServiceList: [],
        buyServiceInfo: {},
        message: '123',
        leftTime: '',
        minute: '',
        second: '',
      }
    },
    created () {
      this.getBookInfo()
      this.leftTime = '900'
      this.showTime()
    },
    methods: {
      Cancel () {
        this.$emit('returnStep', false)
      },
      Comfirm () {
        this.$emit('returnStep', true)
      },
      getBookInfo () {
        let _this = this
        let params = new Object()
        params.id = this.packageData
        postDataToServer('PACKAGE_ORDER_GET', params).then((data) => {
          if (data.status === 0) {
            this.buyServiceList = data.data_list.list_packagedetail
            this.buyServiceInfo = data.data_list.packageorderinfo_title
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      showTime () {
        this.minute = parseInt(this.leftTime / 60 % 60)
        this.second = parseInt(this.leftTime % 60)
        this.message = '请在' + this.minute + '分钟' + this.second + '秒' + '内完成支付'
        if (this.leftTime <= 0) {
          this.$emit('returnStep', false)
        }
        else {
          this.leftTime--
          setTimeout(this.showTime, 1000)
          if (this.leftTime == 3) {
            this.$message({
              showClose: true,
              duration: '4000',
              message: '订单支付超时,将在三秒后返回上一步',
              type: 'warning'
            })
          }
          if (this.leftTime == 0) {
            this.$router.push({'path': '/packagelistdetail'})
          }
        }
      }
    },
  }
</script>

<style scoped>
  .div_package {
    font-size: 0.7 m;
  }

  .order {
    margin-top: 1em;
  }

  .PackageOrderDetail {
    margin: 0 auto;
    margin-top: 20px;
  }

  .div_Time {
    margin: 10px;
    float: right;
    color: #f40;
    font-size: 20px;
  }

  .div_bottom {
    margin-top: 15px;
    float: right;
  }

  .div_information span {
    padding: 5px;
  }

  .div_button {
    margin-top: 15px;
  }

  .return {
    float: right;
    margin-right: 30px;
    font-size: 13px;
    cursor: pointer;
    color: #1d94d1;
    line-height: 40px;
  }
</style>
